<template>
  <section
      v-loading="loading"
      class="section-task-details">
    <div>
      <div class="table-count">
        <DetailsTable
            :rowDataLists="tableRowLists"
            :data="tableData"
        />
      </div>
    </div>
  </section>
</template>

<script>
import {
  defineComponent,
  reactive,
  toRefs,
} from 'vue';

import DetailsTable from './DetailsTable'

import {data} from './data.json'

export default defineComponent({
  name: 'AdTaskDetails',
  components: {
    DetailsTable,
  },
  setup() {
    const state = reactive({
      loading: false,
      tableData: data,
      tableRowLists: [],
    })

    const setTaskId = async () => {
      // 广告计划数量
      state.tableRowLists = data.reduce((arr, item, aIndex) => {
        item.province.forEach((adset, gIndex) => {
            const span_obj = {
             // campaignList 对应下标
             campaignIndex: aIndex,
             // campaignList下的province 对应下标
             unitIndex: gIndex,

           }
          // [1,2] = 合并1行 ,合并2列 0=不显示
          if ( gIndex === 0) {
               let len = item.province.length
               // 按照广告组里所有广告列表数量合并
               span_obj['0'] = [len, 1]
               span_obj['1'] = [1, 1]
             } else {
               span_obj['0'] = [0, 0]
               span_obj['1'] = [1, 1]
               // index = 0 代表新的一组
             }
          arr.push(span_obj)
        })
        return arr
      }, [])
      console.log(state.tableRowLists)
    }
    setTaskId()
    return {
      ...toRefs(state),
    }
  },
});
</script>

<style lang="scss" scoped>
:deep(.el-table--border th:first-child .cell) {
  padding-left: 10px;
}

:deep(.el-table--border td , .el-table--border th ) {
  border-right: 1px solid #dedede !important;
  border-bottom: 1px solid #dedede !important;
}

:deep(.el-table) {
  display: flex;
  flex-direction: column;
  flex: 1;

  .el-table--border td:first-child .cell,
  .el-table__body tr td:first-child .cell {
    padding-left: 10px;
  }

  td:not(:last-of-type) {
    border-right: 1px solid #f2f2f2;
  }

  .el-table__body-wrapper {
    flex: 1;
    overflow-y: overlay;
  }

  thead.is-group {
    th {
      background: #fff;
    }
  }
}

.section-task-details {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 10px 10px;
  width: 100%;
  height: 100%;
  @include pageSection();
  font-size: 14px;

  .section-task-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
    color: $h1-text-color;

    > .task-form-item {
      & + .task-form-item {
        margin-left: 20px;
      }

      :deep(.el-checkbox__label) {
        color: $h1-text-color;
      }
    }
  }

  .table-count {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #dedede;
  }

  .task-detail-header {
    flex-shrink: 0;
    display: flex;
    padding: 15px 20px;
    color: $h1-text-color;

    > .task-form-item {

      & + .task-form-item {
        margin-left: 20px;
      }

      :deep(.el-checkbox__label) {
        color: $h1-text-color;
      }
    }
  }

  > div {
    display: flex;
    flex-direction: column;
    flex: 1;
    border-bottom: none;
    overflow: hidden;
  }
}

.campaign-name {
  & + .campaign-name {
    margin-top: 1em;
  }

  .strong-text {
    margin-bottom: .25em;
  }
}
</style>

<style lang="scss">
.creative_detail {
  width: auto !important;

  .creative_detail_content {
    max-height: 360px;
    overflow: auto;

    .creative_detail_content_item {
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }

      .creative_detail_content_item_title {
        margin-bottom: 10px;
        font-weight: 700;
      }
    }
  }

  .creative_detail_content_material {
    .creative_detail_content_material_item {
      display: inline-block;
      margin-right: 15px;

      &:last-child {
        margin-right: 0;
      }

      .material {
        width: 200px;
        height: 112px;
        text-align: center;
        background: #dedede;
        margin-top: 10px;
        cursor: pointer;

        img, video {
          max-width: 100%;
          max-height: 100%;
        }
      }

      .sticker_styles {
        width: 102px;
        height: 112px;
      }
    }
  }

  .creative_detail_content {
    .creative_detail_slogan_item {
      margin-top: 10px;
    }
  }
}

.layout-header[name="PlatformGoogleAdvertisingTaskDetails"] {
  > .layout-header-menu {
    display: none;
  }
}
</style>
